<!--  -->
<template>
  <div id="calendar">
    <div class="date-title">
      <div class="c-nowMonth fl" @click="show = true">
        <div class="left">
          <img src="../image/rili.png" alt="" />
        </div>
        <div class="right">
          <p>周{{ currentWeek }}</p>
          <p>{{ currentDate | formatDay("YYYY-MM-DD") }}</p>
          <el-date-picker
            v-model="currentDate"
            type="date"
            :editable="false"
            :clearable="false"
            @change="change"
            :picker-options="pickerOptions1"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="weeks fl">
        <div
          class="day fl"
          :class="cur == item.day ? 'on' : ''"
          v-for="item in thisWeeks"
          :key="item.week"
          @click="changeDate(item.exactDate)"
          :style="{
            cursor:
              item.exactDate.getTime() > Date.now() ? 'not-allowed' : 'pointer',
          }"
        >
          <p>{{ item.day }}</p>
          <p>周{{ item.week }}</p>
        </div>
      </div>
    </div>
    <div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <div class="inland">
        <div class="content-title">
          <span class="line-y"></span>
          <span class="left">国内</span>
        </div>
        <div>
          <div class="item" v-show="meeting.length != 0">
            <h1 class="title">
              <img src="../image/zhongdahuiyi_icon.png" alt="" />重大会议
            </h1>
            <div class="ul">
              <div class="boxs" v-for="(item, index) in meeting" :key="index">
                <div class="li">
                  <div class="fl"></div>
                  {{ item.content }}
                </div>
                <div class="involve" v-if="item.stockNames != '——'">
                  相关股票:
                  <span v-for="(stock, index) in item.stockNames" :key="index">
                    {{ stock | formatStock }}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="item" v-show="internal.length != 0">
            <h1 class="title">
              <img src="../image/jingjishuju_icon.png" alt="" />经济数据
            </h1>
            <div class="ul">
              <div class="li" v-for="(item, index) in internal" :key="index">
                <div class="fl"></div>
                {{ item.indicatorName }}
                <p class="yuce">
                  <span>前值：{{ item.indicatorFormer }}</span>
                  <span>预测：{{ item.indicatorForecast }}</span> 公布：{{
                    item.indicatorFact
                  }}
                </p>
              </div>
            </div>
          </div>
          <div class="item" v-show="contract.length != 0">
            <h1 class="title">
              <img src="../image/zhongdahetong_icon.png" alt="" />重大合同
            </h1>
            <table style="margin-top: 20px">
              <thead>
                <tr>
                  <td width="35%">股票</td>
                  <td width="35%">签订合同</td>
                  <td width="35%">占上年营收比</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in contract" :key="index">
                  <td style="color: #02e2f4">
                    {{ item.stockName }}
                    <p style="font-size: 12px; color: #8c8c8c">
                      {{ item.stockCode }}
                    </p>
                  </td>
                  <td>{{ item.amountInvolved | formatMoney }}</td>
                  <td>{{ item.totalOperatingRevenueRate }}%</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="item" v-show="dividend.length != 0">
            <h1 class="title">
              <img src="../image/fenhongsongzhuan_icon.png" alt="" />分红转送
            </h1>
            <table style="margin-top: 20px">
              <thead>
                <tr>
                  <td width="35%">股票</td>
                  <td width="35%">决案公布日</td>
                  <td width="35%">分配方案</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in dividend" :key="index">
                  <td style="color: #02e2f4">
                    {{ item.stockName }}
                    <p style="font-size: 12px; color: #8c8c8c">
                      {{ item.stockCode }}
                    </p>
                  </td>
                  <td>{{ item.smDeciPublDate }}</td>
                  <td>{{ item.allocationPlan }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="zwsj"
          v-show="
            dividend.length == 0 &&
            contract.length == 0 &&
            meeting.length == 0 &&
            internal.length == 0
          "
        >
          <img src="../image/wushuju.png" alt="" />
        </div>
      </div>
      <div class="inland">
        <div class="content-title">
          <span class="line-y"></span>
          <span class="left">国际</span>
        </div>
        <div class="table">
          <table v-if="guoji != ''">
            <thead>
              <tr>
                <td width="10%">时间</td>
                <td width="35%">指标名称</td>
                <td width="11%">前值</td>
                <td width="11%">预测</td>
                <td width="11%">公布</td>
                <td width="11%">利好</td>
                <td width="11%">利空</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in guoji" :key="index">
                <td>{{ item.occurTime }}</td>
                <td style="line-height: 24px">{{ item.indicatorName }}</td>
                <td>{{ item.indicatorFormer }}</td>
                <td>{{ item.indicatorForecast }}</td>
                <td style="color: #ea2827">{{ item.indicatorFact }}</td>
                <td style="color: #ea2827">{{ item.positiveEffect }}</td>
                <td style="color: #0fba0f">{{ item.negativeEffect }}</td>
              </tr>
            </tbody>
          </table>
          <div class="zwsj" v-else>
            <img src="../image/wushuju.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import format from "date-fns/format";
import { Toast } from "vant";
import { getCalendar } from "../api/index";
import dayjs from "dayjs";
//统计
var _hmt = _hmt || [];
(function () {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?1956e65650d4af62990d4f007c813a27";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();

export default {
  data() {
    return {
      currentDate: new Date(),
      currentWeek: "日一二三四五六".charAt(new Date().getDay()),
      selectDate: new Date(),
      thisWeeks: [],
      show: false,
      cur: "",
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      loading: true,
      contract: [
        {
          amountInvolved: "——",
          stockCode: "——",
          stockName: "——",
          totalOperatingRevenueRate: "——",
        },
      ],
      dividend: [
        {
          allocationPlan: "——",
          stockCode: "——",
          stockName: "——",
          publTimeStamp: "——",
        },
      ],
      internal: [
        {
          indicatorName: "——",
          indicatorFormer: "——",
          indicatorForecast: "——",
          indicatorFact: "——",
        },
      ],
      meeting: [
        {
          content: "——",
        },
      ],
      guoji: [
        {
          indicatorName: "——",
          indicatorFact: "——",
          indicatorForecast: "——",
          negativeEffect: "——",
          positiveEffect: "——",
          occurTime: "--:--",
        },
      ],
    };
  },

  mounted() {
    this.getWeeks();
    this.financeCalendar(2);
  },
  filters: {
    formatMoney(val) {
      if (val != "——") {
        return (val / 100000000).toFixed(2) + "亿";
      } else {
        return "——";
      }
    },
    formatStock(val) {
      return val.replace(/-?\d+$/, "");
    },
    formatHold(val) {
      if (val != "——") {
        return Math.floor(val * 100) / 100 + "%";
      } else {
        return "——";
      }
    },
    formatDay(val, reg) {
      if (val != "——") {
        // return format(val, reg);
        return dayjs(val).format(reg);
      } else {
        return "——";
      }
    },
  },
  methods: {
    change(val) {
      this.changeDate(val);
      this.getWeeks(val);
    },
    //隐藏日历，日历日期初始化
    cancel() {
      this.show = false;
      this.selectDate = this.currentDate;
    },
    // 点击高亮当前日期
    changeDate(date) {
      if (date.getTime() > Date.now()) {
        return Toast.fail("暂无数据");
      }
      this.loading = true;
      this.currentDate = date; //currentDate切换31号与1号的时间差
      this.cur = new Date(date).getDate();
      this.currentWeek = "日一二三四五六".charAt(new Date(date).getDay());
      this.cancel();
      this.financeCalendar(1);
      this.financeCalendar(2);
    },
    formatData(type, data) {
      const self = this;
      if (type == 1) {
        Object.keys(data).forEach((key1) => {
          data[key1].forEach((item, index1) => {
            Object.keys(item).map((key2, index2) => {
              const param = data[key1][index1][key2];
              data[key1][index1][key2] = param ? param : "——";
              if (key2 == "stockNames") {
                data[key1][index1][key2] = String(param)
                  .split(",")
                  .filter((_, i) => i <= 2);
              }
            });
          });

          this[key1] = data[key1];
        });
      }
      if (type == 2) {
        data.map((item, index) => {
          Object.keys(item).forEach((key) => {
            const param = data[index][key];
            data[index][key] = param ? param : "——";
          });
        });
        self["guoji"] = data;
      }
    },
    //获取详情
    async financeCalendar(type = 1) {
      this.type = type;
      const formatDate = `${dayjs(this.currentDate).format(
        "YYYY-MM-DD"
      )} 00:00:00`.replace(/-/g, "/");
      const timeStamp = new Date(formatDate).getTime();
      const data = await getCalendar({
        timeStamp: formatDate,
        type: this.type,
      });
      if (data != null) {
        this.formatData(type, data);
        this.loading = false;
      }
    },

    //获取今天所在的周集
    getWeeks(day) {
      const new_Date = day ? day : new Date();
      const timesStamp = new_Date.getTime();
      const currenDay = new_Date.getDay();
      const dates = [];
      for (let i = 0; i < 7; i++) {
        const nowDay = new Date(
          timesStamp + 24 * 60 * 60 * 1000 * (i - currenDay)
        );
        const date = nowDay.getDate();
        const week = ["日", "一", "二", "三", "四", "五", "六"][i];
        dates.push({
          day: date,
          week: week,
          exactDate: nowDay,
        });
      }
      this.cur = new Date(new_Date).getDate(); //高亮今天
      this.currentDate = new_Date;
      this.thisWeeks = dates;
      this.cancel();
      this.financeCalendar();
    },
  },
};
</script>
<style lang="scss" scoped>
#calendar {
  width: 1200px;
  margin: 0 auto;
  background: #090910;
  .date-title {
    width: 600px;
    height: 44px;
    margin-bottom: 16px;
  }
  .c-nowMonth {
    width: 125px;
    height: 44px;
    background: rgba(67, 68, 72, 1);
    border-radius: 4px;
    cursor: pointer;
    .left {
      float: left;
      width: 28px;
      height: 28px;
      margin: 8px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      padding-top: 7px;
      height: 10px;
      font-size: 13px;
      font-weight: 400;
      color: rgba(188, 191, 196, 1);
      line-height: 16px;
    }
  }
  .weeks {
    background: #090910;
    color: #bcbfc4;
    padding: 0 32px;
    cursor: pointer;
    .day {
      width: 25px;
      text-align: center;
      margin-right: 32px;

      p:first-child {
        font-size: 15px;
        font-weight: 400;
        margin: 0 auto;
        line-height: 15px;
      }
      p:last-child {
        padding-top: 15px;
        height: 11px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
      }
      &.on {
        p {
          color: #ea2827;
        }
      }
    }
  }
  .content-title {
    box-sizing: border-box;
    height: 30px;
    background: #27282e;
    border: 1px solid rgba(67, 68, 72, 1);
    font-size: 15px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 30px;
    .line-y {
      float: left;
      margin-left: -1px;
      width: 2px;
      height: 28px;
      background: rgba(255, 138, 27, 1);
    }
    .left {
      margin-left: 13px;
    }
    .right {
      float: right;
      margin-right: 15px;
      color: rgba(188, 191, 196, 1);
    }
  }
  .inland {
    background: #090910;
    box-sizing: border-box;
    border: 1px solid rgba(50, 51, 55, 1);
    margin-bottom: 16px;
    .title {
      height: 16px;
      font-size: 16px;
      font-weight: bold;
      color: rgba(188, 191, 196, 1);
      line-height: 15px;
      img {
        float: left;
        width: 15px;
        height: 15px;
        margin-right: 11px;
      }
    }
    .zwsj {
      text-align: center;
      img {
        width: 406px;
        height: 238px;
        margin-top: 76px;
      }
    }
    .item {
      padding: 14px 0 16px 16px;
      border-bottom: 1px solid rgba(37, 38, 42, 1);
      .ul {
        margin-top: 19px;
        .boxs {
          margin-top: 15px;
          margin-bottom: 8px;
        }
        .boxs:last-child {
          margin-bottom: 0;
        }
        .li {
          margin-bottom: 12px;
          font-size: 15px;
          font-weight: 400;
          color: rgba(188, 191, 196, 1);
          line-height: 15px;
          div {
            width: 4px;
            height: 4px;
            margin-top: 5px;
            margin-right: 9px;
            background: rgba(153, 153, 153, 1);
            border-radius: 50%;
          }

          p {
            margin-left: 14px;
            margin-top: 9px;
            height: 12px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(140, 140, 140, 1);
            line-height: 15px;
            span {
              margin-right: 11px;
            }
          }
        }
        .li:last-child {
          margin-bottom: 0;
        }
      }
      .involve {
        margin-top: 13px;
        height: 12px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(140, 140, 140, 1);
        line-height: 15px;
        span {
          height: 12px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(2, 226, 244, 1);
          line-height: 15px;
          margin-right: 10px;
        }
      }
    }
    .item:last-child {
      border: none;
    }
  }
  table {
    width: 320px;
    height: 12px;
    font-weight: 400;
    line-height: 15px;
    text-align: left;
  }
  table thead {
    font-size: 14px;
    color: #bcbfc4;
  }
  table tbody {
    font-size: 16px;
    color: #bcbfc4;
    line-height: 19px;
  }
  table tbody tr td {
    padding-top: 10px;
    height: 15px;
  }

  .table {
    table {
      width: 100%;
      font-weight: 400;
      text-align: left;
      font-size: 15px;
      border: 1px solid #323337;
    }
    table thead {
      height: 32px;
      line-height: 32px;
      color: #ffffff;
      font-weight: bold;
    }
    table thead tr td {
      padding-left: 16px;
      border: 1px solid #323337;
    }
    table tbody {
      height: 58px;
      color: #bcbfc4;
      line-height: 58px;
    }

    table tbody tr td {
      padding-left: 16px;
      padding-right: 27px;
      border: 1px solid #25262a;
    }
  }
}
</style>
<style>
.el-input__inner {
  line-height: 0 !important;
  padding-left: 15px !important;
  padding-right: 0 !important;
  border: 0 !important;
  width: 125px;
  height: 44px;
  position: absolute;
  top: -57px;
  opacity: 0;
  cursor: pointer;
}
.el-input__inner,
.el-date-editor {
  width: 123px !important;
  height: 22px !important;
  font-size: 13px;
  text-align: center;
  line-height: 22px;
  color: rgba(188, 191, 196, 1);
  background: rgba(67, 68, 72, 1);
  border-radius: 4px;
}
.el-input__prefix {
  opacity: 0;
}

.el-picker-panel {
  color: rgba(188, 191, 196, 1) !important;
  background: #1c1d21 !important;
}
.el-picker-panel table th {
  background: #1c1d21 !important;
}
.el-picker-panel__icon-btn {
  color: rgba(188, 191, 196, 1) !important;
}
.el-popper[x-placement^="bottom"] .popper__arrow {
  top: -7px !important;
}
.el-date-table td.disabled div {
  background-color: #25262a;
  opacity: 0.8;
  cursor: not-allowed;
  color: #c0c4cc;
}
</style>
